<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>引导页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/public.css" rel="stylesheet" />
		<style type="text/css">
			#start{
				position: absolute;
				bottom: 50px;
				width: 60%;
				height: 40px;
				border-radius: 20px;
				left: 50%;
				margin-left: -30%;
				color: #3856D0;
			}
		</style>
	</head>

	<body>
		
		<!-- div.mui-content -->
		<div class="mui-content">
			<!-- msl -->
			<div class="mui-slider">
			  <div class="mui-slider-group">
				<!--第一个内容区容器-->
				<div class="mui-slider-item">
				  <!-- 具体内容 -->
				  <img src="images/bgimg1.jpg" alt="" class="guide-img">
				</div>
				
				<!--第二个内容区-->
				<div class="mui-slider-item">
				  <!-- 具体内容 -->
				  <img src="images/bgimg2.jpg" alt="" class="guide-img">
				</div>
				
				<!--第三个内容区-->
				<div class="mui-slider-item">
				  <!-- 具体内容 -->
				  <img src="images/bgimg3.jpg" alt="" class="guide-img">
				  <!-- mbu -->
				  <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="start">按钮</button>
				</div>
			  </div>
				
				<!-- 记得改点的颜色 -->
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
		</div>
		
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
			
			// mpl
			mui.plusReady(function () {
			    // 获取状态栏的高度
				let sh = plus.navigator.getStatusbarHeight();
				
				// 获取屏幕的分辨率（宽度、高度）
				let w = plus.screen.resolutionWidth;
				let h = plus.screen.resolutionHeight;
				
				// 改变启动页3张轮播图的宽、高度
				let imgs = document.querySelectorAll('.guide-img');
				for(let i=0,len=imgs.length; i<len; i++){
					imgs[i].style.width = w+'px';
					// imgs[i].style.height = (h-sh)+'px';
					imgs[i].style.height = h+'px';
				}
				
				// 给立即体验按钮，添加点击事件
				document.querySelector('#start').addEventListener('tap',function(){
					// alert(1)  // 不建议使用
					// plus.nativeUI.alert('hello');  // 建议这个，根据设备的系统ui
					
					// 统一mui主题
					// mui.toast('哈哈')
					// mui.alert('hello mui') 
					
					// 做什么：先把看过启动页面的状态存储起来（存储内容必须是字符串）
					plus.storage.setItem('launch',"true");
					
					// 使用webview“切换”“显示”回主页面 index.html
					let index = plus.webview.create('index.html','index');			//创建新的Webview窗口
					// 显示index.html这个页面的窗口 
					index.show();
				})
				
			})
			
		</script>
	</body>

</html>
